<template>
  <div>
      <!-- 回顶 -->
      <top v-if="!ring"></top>
    <!-- 配套商品 -->
    <!-- 页头 -->
    <!-- <my-header></my-header> -->
    <!-- 内容区域 -->
    <div class="syzs">
      <!-- 标题 -->
      <h2 class="title">海外 旅拍婚纱</h2>

      <!-- 轮播图 -->
      <!-- 轮播图 -->
      <mt-swipe :auto="3000" style="height: 65vw">
        <mt-swipe-item>
          <img style="width: 100%" v-src="lbt1" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img style="width: 100%" v-src="lbt2" alt="" />
        </mt-swipe-item>
        <mt-swipe-item v-if="index < 3 ? false : true">
          <img style="width: 100%" v-src="lbt3" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img style="width: 100%" v-src="lbt4" alt="" />
        </mt-swipe-item>
        <mt-swipe-item>
          <img style="width: 100%" v-src="lbt5" alt="" />
        </mt-swipe-item>
      </mt-swipe>
      <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="({ img2 }, i) in data" :key="i">
          <img
            v-src="img2"
            alt=""
            style="margin: 0 auto; width: 80vw; display: block"
          />
        </van-swipe-item>
      </van-swipe> -->

      <!-- 介绍 -->
      <div class="introduce">
        <p>
          新娘將旅行、婚紗融合成幸福攝影。我們提供的「高品質」 旅拍婚紗
          服務，讓在乎婚紗照風格、婚紗禮服質感的新人都滿意推薦！
        </p>
      </div>

      <!-- 摄影展示 -->
      <van-cell is-link @click="showPopup" style="background: #f5f5f5">
        <div class="picimg">
          <img
            v-for="({ img3 }, i) of data"
            :key="i"
            style="width: 42vw; display: block; margin-bottom: 20px"
            class=""
            v-src="img3"
            alt=""
          />
        </div>
      </van-cell>
      <!-- 放大 -->
      <van-popup v-model="show" v-if="show" @click=" shuax" >
        <img
          v-for="({ img3 }, i) of data"
          :key="i"
          style="pointer-events: none; width: 95vw; height: 50vh;"
          class=""
          v-src="img3"
          alt=""
        />
      </van-popup>
      <!-- 摄影师  婚纱造型团队 -->
      <div class="text">
        <h2>摄影师团队</h2>
        <div>
          <p>王牌摄影师团队:李曼 周晔 风华</p>
          <span>Phone:19824533876</span>
        </div>
        <div>
          <p>金牌摄影师团队:王刚 杨欣 魏雨</p>
          <span>Phone:19624655438</span>
        </div>
        <div>
          <p>高级摄影师团队:熊馨宁 风兰 陈一鸣</p>
          <span>Phone:19556893964</span>
        </div>
        <h2>服装造型团队</h2>
        <div>
          <p>王牌服装造型团队:陈思曼 李宁 李家豪</p>
          <span>Phone:15924533986</span>
        </div>
        <div>
          <p>金牌服装造型团队:易晓鸥 辛叶 广元</p>
          <span>Phone:16724655490</span>
        </div>
        <div>
          <p>高级服装造型团队:王品玉 袁宁宁 周升</p>
          <span>Phone:17556893956</span>
        </div>
      </div>
      <!-- 婚戒订制 -->
      <div>
        <!-- 标题 -->
        <h2 class="title">婚戒配饰</h2>
        <!-- 介绍 -->
        <div class="introduce">
          <p>
            &nbsp;&nbsp;&nbsp;&nbsp;求婚戒指是在求婚或者是在订婚时刻，男士为心爱的女士戴在左手中指上的，因为左手无名指和心脏联系最近，因此会被视为爱情最为神圣的礼物，也可以体现男士把订婚对象当作最珍贵的人。<br /><br />
            &nbsp;&nbsp;&nbsp;&nbsp;婚戒代表两个异性相遇、相识、相知、相爱、相惜过程的见证。每一份感情都来之不易，能够获得知心爱人，任何一个人都需要好好的珍惜，相互宽容、相互体谅，相互照顾。
          </p>
        </div>

        <!-- 戒指展示 -->
        <van-cell is-link @click="showRing" style="background: #f5f5f5">
          <div class="picimg">
            <img
              v-for="({ img1 }, i) of data"
              :key="i"
              style="width: 42vw; display: block; margin-bottom: 20px"
              class=""
              v-src="img1"
              alt=""
            />
          </div>
        </van-cell>
        <van-popup v-model="ring" v-if="ring"  @click=" shuax" >
          <img
            v-for="({ img1 }, i) of data"
            :key="i"
            style="pointer-events: none;  width: 90vw; height: 90vh;"
            class=""
            v-src="img1"
            alt=""
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
import MyFooter from "@/components/MyFooter.vue";
import Top from "@/components/Top.vue";
export default {
  inject: ["reload"],
  components: { MyHeader, MyFooter,Top },
  //
  data() {
    return {
      ring:false,
      show: false,
      data: null,
      index: "",
      lbt1: "",
      lbt2: "",
      lbt3: "",
      lbt4: "",
      lbt5: "",
    };
  },
  //
  methods: {
    showPopup() {
      this.show = true;
    },
    showRing(){
      this.ring = true;
    },
     //刷新
     shuax() {
      this.reload();
      
    },
  },
  //
  mounted() {
    this.axios.get("img_syzs").then((res) => {
      console.log(res);
      this.data = res.data.results;
      console.log(this.data[0].img2);
      this.lbt1 = this.data[0].img2;
      this.lbt2 = this.data[1].img2;
      this.lbt3 = this.data[2].img2;
      this.lbt4 = this.data[3].img2;
      this.lbt5 = this.data[4].img2;
      this.index = this.data[2].img2.length;
      console.log("长度", this.index);
    });
  },
};
</script>

/* 外部样式引入 */
<style scoped src="../../../assets/CSS/Photographic_display.css">
</style>

<style lang="scss" scoped>
.van-icon {
  display: none;
  margin: 0;
}
.introduce p[data-v-8dd1d88c] {
  padding: 25px 20px 50px 20px;
}
.text {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: left;
  > div {
    border: 1px solid #786542;
    margin-bottom: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 17px;
    > p {
      padding-bottom: 5px;
    }
  }
  > h2 {
    text-align: center;
    color: #786542;
    padding: 10px 20px;
  }
}
.my-swipe img{
  height: 55vw;
}
</style>
